<template>
    <div class="page">
        <div class="page-content">
            <div class="title">成员列表</div>
            <el-input class="form-top" v-model.trim="searchT" placeholder="请输入关键词过滤" show-word-limit maxlength="20">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-tree
                ref="tree2"
                class="filter-tree"
                :data="treeData"
                :props="defaultProps"
                node-key="treeId"
                :highlight-current="true"
                :filter-node-method="filterNode"
                :expand-on-click-node="false"
                :default-expand-all="false"
                :load="loadNode"
                lazy
                @node-click="handleNodeClick2"
                ><span class="custom-tree-node" slot-scope="{ node, data }">
                    <span class="tree-node-icon">
                        <i v-if="data.leaf" class="el-icon-s-custom"></i>
                        <i v-else class="el-icon-office-building"></i>
                    </span>
                    <span>{{ node.label }}</span>
                </span>
            </el-tree>
        </div>
        <div class="page-content">
            <div v-if="treeData.length > 0">{{ selected_employee.name }}</div>
            <el-tabs v-model="activeType" @tab-click="changeType" stretch>
                <el-tab-pane v-for="item in typeList" :key="item.id" :label="item.name" :name="item.id">
                    <div class="madp-center-empty" v-if="personList.length == 0">
                        <img class="madp-no-link" src="/img/nodata.png" alt />
                        <div>暂无数据</div>
                    </div>
                    <ul v-for="(it, idx) in personList" :key="idx">
                        <li :class="activeIdx == idx ? 'madp-person madp-active-li' : 'madp-person'" v-if="personList.length > 0" @click="selectClick(it, idx)">
                            <img :src="it.avatar" class="madp-person-img" :onerror="`src='/img/${item.id == 2 ? 'group' : 'male'}.png'`" />
                            <span>{{ it.name }}</span>
                        </li>
                        <div class="madp-no-data" v-else>
                            {{ personList.length }}
                            <span style="color:red">暂无联系人</span>
                        </div>
                    </ul>
                    <el-pagination
                        v-if="page1.total > page1.size"
                        class="content-page"
                        background
                        :current-page="page1.current"
                        @size-change="handleSizeChange1"
                        @current-change="handleCurrentChange1"
                        :page-sizes="[10, 20, 30, 50, 100]"
                        :page-size="page1.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page1.total"
                    ></el-pagination>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="page-content">
            <div v-if="!activeInfo.id">
                <div class="madp-right-empty">
                    <div>
                        <img src="/img/nodata.png" class="" alt />
                    </div>
                </div>
                <div class="madp-right-empty">
                    <div>请选择联系人</div>
                </div>
            </div>
            <div v-else class="madp-chat-records">
                <div v-if="personList.length > 0">与{{ activeInfo.name }}的聊天</div>
                <el-tabs v-model="activeTabType" @tab-click="changeTabType">
                    <el-tab-pane v-for="item in fileTypeList" :key="item.type" :label="item.name" :name="item.type">
                        <el-date-picker
                            v-model="value1"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="yyyy-MM-dd"
                            :picker-options="{
                                disabledDate(time) {
                                    return time.getTime() > Date.now();
                                }
                            }"
                            @change="getChatRecordsList"
                        >
                        </el-date-picker>
                        <el-button @click="clearFn" class="madp-clear-btn">清空</el-button>
                        <div class="madp-center-empty" v-if="chatList.length == 0">
                            <img class="madp-no-link" src="/img/nodata.png" alt />
                            <div>暂无数据</div>
                        </div>
                        <div class="madp-chatInfo" v-for="(it, i) in chatList" :key="i">
                            <div>
                                <div>
                                    <p :class="it.isCurrentUser == 0 ? 'madp-chat-link' : 'madp-chat-link madp-chat-right'">
                                        <span v-if="it.isCurrentUser == 0">
                                            <span class="madp-chatInfo-name">{{ it.name }}</span>
                                            <span class="madp-chatInfo-time">{{ it.msgDataTime }}</span>
                                        </span>
                                        <span v-else>
                                            <span class="madp-chatInfo-etime">{{ it.msgDataTime }}</span>
                                            <span class="madp-chatInfo-ename">{{ it.name }}</span>
                                        </span>
                                    </p>
                                    <div v-if="it.type == 1" :class="it.isCurrentUser == 0 ? '' : 'madp-chat-right'">
                                        <p :class="it.isCurrentUser == 0 ? 'madp-chatInfo-chat madp-text-over' : 'madp-chatInfo-echat madp-text-over'">{{ it.content.content }}</p>
                                    </div>
                                    <div v-if="it.type == 2" :class="it.isCurrentUser == 0 ? 'madp-chat-box' : 'madp-chat-box madp-chatInfo-eimg'">
                                        <img
                                            :src="it.content.ossPath"
                                            class="madp-chatInfo-img"
                                            @click="
                                                isLargeImgShow = true;
                                                largeImgUrl = it.content.ossPath;
                                            "
                                        />
                                    </div>
                                    <div v-if="it.type == 13" :class="it.isCurrentUser == 0 ? '' : 'madp-chat-right'">
                                        <p :class="it.isCurrentUser == 0 ? 'madp-chatInfo-chat madp-text-over' : 'madp-chatInfo-echat madp-text-over'">
                                            <a :href="it.content.link_url" target="_blank">{{ it.content.link_url }}</a>
                                        </p>
                                    </div>
                                    <div v-if="it.type == 4" :class="it.isCurrentUser == 0 ? '' : 'madp-right-audio'">
                                        <audio :src="it.content.ossPath" controls="controls" class="madp-chatInfo-audio"></audio>
                                    </div>
                                    <div :class="it.isCurrentUser == 0 ? '' : 'madp-chatInfo-eimg'" v-if="it.type == 5">
                                        <video :src="it.content.ossPath" controls="controls" class="madp-chatInfo-img"></video>
                                    </div>
                                    <div v-if="it.type == 7" :class="it.isCurrentUser == 0 ? '' : 'madp-right-audio'">
                                        <!-- 音频 -->
                                        <div v-if="it.content.fileext == 'mp3'">
                                            <audio :src="it.content.ossPath" controls="controls" class="madp-chatInfo-audio"></audio>
                                        </div>
                                        <!-- 视频 -->
                                        <div v-if="it.content.fileext == 'mp4'">
                                            <video :src="it.content.ossPath" controls="controls" class="madp-chatInfo-img"></video>
                                        </div>
                                        <div class="madp-file" v-else>
                                            <div>
                                                <p class="madp-file-name">
                                                    {{ it.content.filename }}
                                                </p>
                                                <p>{{ (it.content.filesize / 1024).toFixed(2) }}kb</p>
                                            </div>
                                            <a :href="it.content.ossPath" target="_blank">
                                                <img src="/img/xlsx.png" v-show="it.content.fileext == 'xlsx'" class="madp-chatInfo-file" />
                                                <img src="/img/pdf.jpg" v-show="it.content.fileext == 'pdf'" class="madp-chatInfo-file" />

                                                <img src="/img/ppt.jpg" v-show="it.content.fileext == 'pptx'" class="madp-chatInfo-file" />

                                                <img src="/img/txt.png" v-show="it.content.fileext == 'txt'" class="madp-chatInfo-file" />

                                                <img src="/img/word.png" v-show="it.content.fileext == 'docx'" class="madp-chatInfo-file" />

                                                <img src="/img/csv.png" v-show="it.content.fileext == 'csv'" class="madp-chatInfo-file" />
                                                <img :src="it.content.ossPath" v-show="it.content.fileext == 'jpg'" class="madp-chatInfo-file" />
                                                <img :src="it.content.ossPath" v-show="it.content.fileext == 'png'" class="madp-chatInfo-file" />
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <el-pagination
                            v-if="page2.total > page2.size"
                            class="content-page"
                            background
                            :current-page="page2.current"
                            @size-change="handleSizeChange2"
                            @current-change="handleCurrentChange2"
                            :page-sizes="[10, 20, 30, 50, 100]"
                            :page-size="page2.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="page2.total"
                        ></el-pagination>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <!-- 点击放大图片  -->
        <large-img
            :visible="isLargeImgShow"
            :imgUrl="largeImgUrl"
            @close="
                isLargeImgShow = false;
                largeImgUrl = '';
            "
        />
    </div>
</template>
<script>
import { fetchTree } from '@/api/admin/dept';
import { retrieve_emp, chatEmployeeObject, chatRecords } from '@/api/enterprise/session-archiving';
import LargeImg from '@/components/large-img';
export default {
    components: { LargeImg },
    data() {
        return {
            isLargeImgShow: false,
            largeImgUrl: '',
            searchT: '',
            defaultProps: {
                children: 'children',
                label: 'name',
                isLeaf: 'leaf'
            },
            treeData: [],
            selected_employee: {},
            typeList: [
                {
                    name: '内部联系人',
                    id: '0'
                },
                {
                    name: '外部联系人',
                    id: '1'
                },
                {
                    name: '群聊',
                    id: '2'
                }
            ],
            fileTypeList: [
                {
                    name: '全部',
                    type: '0'
                },
                {
                    name: '文本',
                    type: '1'
                },
                {
                    name: '图片',
                    type: '2'
                },
                {
                    name: '链接',
                    type: '13'
                },
                {
                    name: '语音',
                    type: '4'
                },
                {
                    name: '视频',
                    type: '5'
                },
                {
                    name: '文件',
                    id: '7'
                }
            ],
            personList: [], //会话列表
            activeType: '0',
            activeTabType: '0',
            chatList: [],
            activeInfo: {},
            value1: '',
            page1: {
                current: 1,
                size: 10,
                total: 0
            },
            page2: {
                current: 1,
                size: 10,
                total: 0
            },
            activeIdx: ''
        };
    },
    watch: {
        searchT(val) {
            this.$refs.tree2.filter(val);
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            fetchTree().then((response) => {
                let data = response.data.data;
                data = this.reduceArr(data);
                this.treeData = data;
            });
        },
        reduceArr(data) {
            data = data.map((i) => {
                i.treeId = i.id + i.name;
                if (i.children && i.children.length > 0) {
                    i.children = this.reduceArr(i.children);
                }
                return i;
            });
            return data;
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        loadNode(node, resolve) {
            if (node.data.id) {
                let obj = { deptId: node.data.id };
                retrieve_emp(obj).then((response) => {
                    if (response.data.code === 0) {
                        // 只返回了用户的数据
                        let arr1 = response.data.data.map((i) => {
                            let obj = {
                                leaf: true,
                                name: i.name,
                                id: i.id,
                                treeId: i.id + i.name
                            };
                            return obj;
                        });
                        // 合并到当前部门下的部门
                        let arr = [...arr1, ...node.data.children];
                        resolve(arr);
                    }
                });
            }
        },
        handleNodeClick2(data) {
            if (!data.leaf) return;
            this.selected_employee = data;
            this.page1.current = 1;
            this.getChatObjectList();
            this.activeInfo = {};
        },
        changeType() {
            this.activeInfo = {};
            this.page1.current = 1;
            this.getChatObjectList();
        },
        getChatObjectList() {
            if (!this.selected_employee.id) return;
            let params = {
                usertype: this.activeType,
                userId: this.selected_employee.id,
                size: this.page1.size,
                current: this.page1.current
            };
            chatEmployeeObject(params).then((res) => {
                if (res.data && res.data.code == 0) {
                    this.personList = res.data.data.records;
                    this.page1.total = res.data.data.total;
                }
            });
        },
        handleSizeChange1(val) {
            this.page1.size = val;
            this.getChatObjectList();
        },
        handleCurrentChange1(val) {
            this.page1.current = val;
            this.getChatObjectList();
        },
        handleSizeChange2(val) {
            this.page2.size = val;
            this.getChatRecordsList();
        },
        handleCurrentChange2(val) {
            this.page2.current = val;
            this.getChatRecordsList();
        },
        selectClick(val, index) {
            this.activeIdx = index;
            this.activeInfo = val;
            this.getChatRecordsList();
        },
        getChatRecordsList() {
            if (!this.activeInfo.id || !this.selected_employee.id) return;
            let params = {
                toUserId: this.activeInfo.id,
                toUserType: this.activeType,
                type: this.activeTabType,
                userId: this.selected_employee.id,
                userType: 0, //检索对象类型
                dateTimeStart: this.value1[0],
                dateTimeEnd: this.value1[1],
                size: this.page2.size,
                current: this.page2.current
            };
            chatRecords(params).then((res) => {
                if (res.data && res.data.code == 0) {
                    this.chatList = res.data.data.records;
                    this.page2.total = res.data.data.total;
                }
            });
        },
        changeTabType() {
            console.log('切换类型值----', this.activeTabType);
            this.getChatRecordsList();
        },
        clearFn() {
            this.value1 = '';
            this.getChatRecordsList();
        }
    }
};
</script>
<style lang="scss" scoped>
.page {
    display: flex;
    height: calc(100vh - 12rem);
    &-content:nth-child(1) {
        width: 25%;
        min-width: 400px;
        overflow: auto;
        border-right: 2px solid #ccc;
        padding-right: 10px;
        box-sizing: border-box;
        .title {
            font-size: 18px;
            margin: 10px 0;
        }
    }
    &-content:nth-child(2) {
        width: 25%;
        min-width: 26.1rem;
        border-right: 2px solid #ccc;
        padding: 0 10px;
        box-sizing: border-box;
    }
    &-content:nth-child(3) {
        flex: 1;
        overflow: auto;
        /deep/ .el-tabs__content {
            overflow: auto;
        }
    }
}
.tree-node-icon {
    display: inline-block;
    margin-right: 4px;
    font-size: 20px;
    color: #ed5555;
}
.madp-center-empty {
    text-align: center;
}
.madp-no-link {
    height: 80px;
    margin-top: 20px;
}
.madp-person {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 5px;
    margin: 5px;

    .madp-person-img {
        border-radius: 4px;
        width: 40px;
        margin-right: 10px;
    }
}
.madp-active-li {
    background: #ebf4fc;
}
.madp-no-data {
    font-size: 16px;
    color: rgba(238, 91, 34, 0.568);
    text-align: center;
}
.madp-right-empty {
    display: flex;
    justify-content: center;
    align-items: center;
}
.madp-chat-records {
    margin: 5px;
    padding: 5px;
}
.madp-clear-btn {
    margin-left: 15px;
}
.madp-chatInfo {
    margin: 25px auto 68px;
    .madp-chatInfo-name {
        color: #696969;
        font-size: 12px;
    }
    .madp-chatInfo-ename {
        color: #696969;
        font-size: 12px;
        padding-left: 20px;
    }
    .madp-chatInfo-etime {
        color: #80a7e6;
        font-size: 12px;
    }
    .madp-chatInfo-time {
        color: #80a7e6;
        font-size: 12px;
        padding-left: 20px;
    }

    .madp-chatInfo-chat {
        display: inline-block;
        padding: 8px 10px;
        border-radius: 8px;
        background: #2a57a0;
        color: #fff;
        font-size: 15px;
        margin-top: 10px;
    }
    .madp-chatInfo-img {
        width: 125px;
        height: 125px;
        padding: 8px;
        border-radius: 8px;
        background: #2a57a0;
        color: #fff;
        font-size: 15px;
        margin-top: 10px;
    }
    .madp-text-over {
        display: inline-block;
        word-wrap: break-all;
        word-break: normal;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
        padding: 0 4px;
    }
    .madp-chatInfo-echat {
        padding: 8px 10px;
        border-radius: 8px;
        background: #2a57a0;
        color: #fff;
        font-size: 15px;
    }
    .madp-chat-box {
        height: 160px;
    }
}
.madp-chatInfo-eimg {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 125px !important;
    padding: 8px;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    margin-top: 10px;
}
.madp-right-audio {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    // float: right;
}
.madp-chatInfo-audio {
    padding: 8px;
    height: 34px;
    border-radius: 8px;
    background: #2a57a0;
    color: #fff;
    font-size: 15px;
    margin-top: 10px;
}
.madp-chatInfo-file {
    width: 84px;
    height: 84px;
    object-fit: contain;
}
.madp-file-name {
    width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.madp-file {
    height: 104px;
    width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
}
.madp-chatInfo-link {
    padding: 8px;
    height: 34px;
    border-radius: 8px;
    background: #2a57a0;
    color: #fff;
    width: 400px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/deep/.el-date-editor .el-range-separator {
    width: 7%;
}
.madp-chat-right {
    display: flex;
    justify-content: flex-end;
}
.content-page {
    margin-top: 10px;
}
</style>
